<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.box1{
				width: 300px;
				height: 300px;
				background-color: #bfa;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: yellow;
				
				/*
				 * 子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素
				 * 使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠
				 */
				margin-top: 100px;
			}
			
			
			
			
			.box3{
				border: 10px red solid;
			}
			
			.box4{
				width: 100px;
				height: 100px;
				background-color: yellowgreen;
				float: left;
			}
			
			/**
			 * 解决父子元素的外边距重叠
			 */
			/*.box1:before{
				content: "";*/
				/*
				 * display:table可以将一个元素设置为表格显示
				 */
			/*	display: table;
			}
			*/
			
			/**
			 * 解决父元素高度塌陷
			 */
			/*.clearfix:after{
				content: "";
				display: block;
				clear: both;
			}*/
			
			/*
			 * 经过修改后的clearfix是一个多功能的
			 * 	既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠
			 */
			.clearfix:before,
			.clearfix:after{
				content: "";
				display: table;
				clear: both;
			}
			
			.clearfix{
				zoom: 1;
			}
		</style>
	</head>
	<body>
		
		<div class="box3 clearfix">
			<div class="box4"></div>
		</div>
		
		<div class="box1 clearfix">
			<div class="box2"></div>
		</div>
		
	</body>
</html>
